<template>
  <Header />
  <div class="registration-page">
    <div class="back-link">
      <el-link class="more" @click="onCancel" type="primary" icon="DArrowLeft"
        >返回</el-link
      >
      <span> 首页 / 公告详情</span>
    </div>

    <div class="form-container">
      <!-- PDF 渲染容器 -->
      <!-- <iframe :src="pdfUrl" frameborder="0" class="pdf-iframe"></iframe> -->
      <VuePdfEmbed :source="pdfUrl" />
    </div>
    <div class="btn-box" v-if="operate">
      <el-button
        type="primary"
        @click="downloadPdf"
        style="width: 200px; height: 40px"
        >下载项目公告及附件</el-button
      >
      <el-button
        type="primary"
        @click="applyProject"
        style="width: 200px; height: 40px"
        >参与本项目</el-button
      >
    </div>
  </div>
</template>

<script setup>
import VuePdfEmbed from "vue-pdf-embed";
import { useRoute, useRouter } from "vue-router";
import { getNoticeInfo } from "@/api/projectNotice";
import { showMessage } from "@/utils/common";
import { onMounted, ref } from "vue";
import { addDownloadRecord, projectAttachmentDownload } from "@/api/project";
const baseApiUrl = import.meta.env.VITE_APP_BASE_API;

const pdfUrl = computed(() => baseApiUrl + route.query.pdfUrl);
const route = useRoute();
const router = useRouter();
const userInfo = computed(() =>
  JSON.parse(localStorage.getItem("supplierInfo"))
);
const href = computed(() => {
  if (route.query.type == "indexView") {
    return "/index";
  } else if (route.query.type == "search") {
    return "/search";
  } else {
    return "/home";
  }
});
const operate = ref(true);
// onMounted(() => {
//   getNoticeInfo(route.query.noticeId).then((res) => {
//     if (res.code == 200) {
//       pdfUrl.value = baseApiUrl + res.data.noticeUrl;
//     }
//   });
// });
const downloadPdf = async () => {
  if (!localStorage.getItem("token")) {
    showMessage("请先登录", "error");
    return;
  }
  addDownloadRecord({
    projectId: route.query.noticeId || route.query.id,
    supplierId: userInfo.value?.id,
  });
  // 下载文件的逻辑
  projectAttachmentDownload({
    projectId: route.query.noticeId || route.query.id,
  })
    .then((res) => {
      // 创建Blob对象
      const blob = new Blob([res]);
      console.log(blob);

      // 创建下载链接并模拟点击下载
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "项目公告及附件.zip"; // 可自定义下载的文件名
      document.body.appendChild(a); // 兼容某些浏览器需要将a标签添加到dom树中
      a.click();

      // 释放之前创建的URL对象
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a); // 下载完成后移除a标签
    })
    .catch((error) => {
      console.error("Error downloading file:", error);
    });
};
const applyProject = () => {
  if (!localStorage.getItem("token")) {
    showMessage("请先登录", "error");
    return;
  }
  let id = route.query.noticeId || route.query.id;
  router.push({
    path: "/announcementApply",
    query: {
      id: id,
      type: "apply",
    },
  });
};
const onCancel = () => {
  if (window.history.length > 1) {
    window.history.back(); // 返回上一页
  } else {
    router.push(`judgeProject?type=${route.query.type}`);
    window.location.reload(); // 刷新当前页面
  }
};
onMounted(() => {
  const judgeInfo = localStorage.getItem("judgeInfo");
  if (judgeInfo) {
    operate.value = false;
  }
});
</script>

<style lang="scss" scoped>
.btn-box {
  margin-top: 15px;
}
.registration-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: url("../../assets/f87147698f07020d4fea348f49da0166.png") no-repeat
    center center;
  background-size: cover;
  padding: 20px 0;
  min-height: calc(100% - 96px);
  .back-link {
    width: 100%; /* 改为 100% */
    max-width: 1300px;
    padding: 5px 2rem;
    span {
      margin-left: 10px;
      font-size: 14px;
      color: #333;
    }
  }
  .form-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%; /* 改为 100% */
    max-width: 1300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* 需要这个来让iframe填充容器 */
    .pdf-iframe {
      width: 100%; /* 让 iframe 宽度 100% */
      height: 100%; /* 让 iframe 高度 100% */
      border: none; /* 去掉边框 */
      position: absolute; /* 确保 iframe 充满父容器 */
      top: 0;
      left: 0;
    }
  }
}
::v-deep .vue-pdf-embed {
 width: 100%;
}
::v-deep .vue-pdf-embed__page canvas {
 width: 100% !important;
 border: 1px solid #000;
 margin-bottom: 5px;
}
</style>
